<template>
  <div class="breadcontainer">
    <div class="breadCrumb-con">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-if="firstId" class="cursor">
          <span @click="routeToPath('/search/product?classifyId='+firstId)">{{firstTradeName}}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="secondId" class="cursor" >
          <span @click="routeToPath('/search/product?classifyId='+secondId)">{{secondTradeName}}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="thirdId" class="cursor">
          <span @click="routeToPath('/search/product?classifyId='+thirdId)">{{thirdTradeName}}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{content.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
  import { productDetails,getCategoryFamily } from '@/api/product'

  export default {
    props: ['categoryId', 'id'],
    name: 'BreadCrumb',
    components: {},
    data() {
      return {
        firstId: null,
        firstTradeId: null,
        firstTradeName: null,
        secondId: null,
        secondTradeId: null,
        secondTradeName: null,
        thirdId: null,
        thirdTradeId: null,
        thirdTradeName: null,
        content: {
          title: ''
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        productDetails(this.id).then(res => {
          this.content = res.data;
          let categoryId = res.data.categoryId;
          getCategoryFamily({id: categoryId}).then(res=>{
            this.firstId =  res.data.firstId;
            this.firstTradeId =  res.data.firstTradeId;
            this.firstTradeName =  res.data.firstTradeName;
            this.secondId =  res.data.secondId;
            this.secondTradeId =  res.data.secondTradeId;
            this.secondTradeName =  res.data.secondTradeName;
            this.thirdId =  res.data.thirdId;
            this.thirdTradeId =  res.data.thirdTradeId;
            this.thirdTradeName =  res.data.thirdTradeName;
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .breadcontainer {
    padding: 15px 0 15px 0;
    .breadCrumb-con {
      color: #888;
      font-size: 14px;
    }
  }
</style>
<style lang="scss">
  .breadcontainer{
    .el-breadcrumb__inner {
      color: #888;
      font-size: 14px;
    }
    .el-breadcrumb__item:last-child .el-breadcrumb__inner{
      color: #888;
      font-size: 14px;
    }

  }

</style>
